<template>
	<view class="question-wrapper">
		<view class="head">
			<image src="https://oss.yzroom.com/attach/2023/11/7eb2d202311151806268854.png"></image>
		</view>
		<view class="main">
			
			<view class="top-title" style="text-align: center;">请如实填写问卷信息，感谢您的配合与支持。</view>
			
			<view v-for="(item, index) in question">
				
				<view style="color: #1F1F1F;font-size: 32rpx;margin-top: 48rpx;"><text style="color: #FF2E1F;">*</text>{{item.question}}</view>
				
				<view v-if="item.type == 'number'">
					<view class="input-box" >
						<input type="number" :placeholder="item.placeholder" v-model="item.answer">
					</view>
				</view>
				
				<view v-if="item.type == 'input'">
					<view class="input-box" >
						<input type="text" :placeholder="item.placeholder" v-model="item.answer">
					</view>
				</view>
				
				<view v-if="item.type == 'select'">
					<view class='item' >
						<picker class='num' @change="(value) => bindPickerChange(value, index)" :range="item.option">
							<view class="picker">
								<view class='reason' v-if="item.answer">{{item.answer}}</view>
								<view class='reason' style="color: #999;" v-else>{{item.placeholder}}</view>
								<image style="width: 24rpx;height: 24rpx;margin-right: 20rpx;" src="../../static/images/down-jiantou.png"></image>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		
		<view class="height-add"></view>
		<view class='footer acea-row row-between-wrapper'>
			<view class='addressBnt on' @click='subMit'>
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import { questionList, questionPost } from '@/api/question.js'
	export default{
		name:'question',
		data(){
			return {
				name:'',
				phone:'',
				question:[],
				orderId: 0,
				selectIndex: 0
			}
		},
		onLoad(options){
			this.orderId = options.orderId || 0
			this.getInfo()
		},
		onShow(){
		},
		methods:{
			bindPickerChange(e, index) {
				console.log(e)
				this.question[index].answer = this.question[index].option[e.detail.value] 
				
			},
			getInfo(){
				questionList(this.orderId).then(res=>{
					this.question = res.data.list
				})
			},
			subMit(){
				const that = this
				uni.showLoading({
					title: '提交中'
				})
				questionPost(this.orderId, {
					questionData: this.question
				}).then(res=>{
					uni.hideLoading()
					that.$util.Tips({ title: res.msg });
				}).catch(function(res) {
					uni.hideLoading()
					that.$util.Tips({ title: res });
				});
			}
		}
	}
</script>

<style lang="stylus">
	page 
	  background-color #1F78FF
	  
	.top-title {
		text-align: center;
		border-radius: 8rpx;
		border: 2rpx solid #FF6933;
		color: #FF6933;
		padding: 24rpx 0;
	}

	.question-wrapper
		.head
			height 340rpx
			image
				width 100%
				height 100%
		.main
			margin-top 16rpx
			padding 30rpx 30rpx 68rpx
			background-color #FFF
			margin 0 24rpx
			border-radius 24rpx;
			.title
				font-size 30rpx
				font-weight bold
			.input-box
				margin-top 20rpx
				input
					display block
					width 100%
					height: 92rpx;
					background #F7F9FC
					border-radius: 8rpx
					font-size 28rpx
					padding-left 20rpx
		.height-add
			height 120rpx
			height calc(120rpx+ constant(safe-area-inset-bottom))
			height calc(120rpx + env(safe-area-inset-bottom))
			padding-bottom constant(safe-area-inset-bottom)
			padding-bottom env(safe-area-inset-bottom)
		
		.footer 
			position fixed
			width 100%
			bottom 0
			height 106rpx
			padding 0 30rpx
			box-sizing border-box
			background #1F78FF
			height calc(106rpx+ constant(safe-area-inset-bottom))
			height calc(106rpx + env(safe-area-inset-bottom))
			padding-bottom constant(safe-area-inset-bottom)
			padding-bottom env(safe-area-inset-bottom)
		.footer .addressBnt {
			width: 100%;
			height: 76rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 76rpx;
			font-size: 30rpx;
			color: #fff;
			background-color: #3392FF;
		}
		
		.item {
			margin-top 20rpx
			height: 92rpx;
			background #F7F9FC
			border-radius: 8rpx
			font-size 28rpx
			padding-left 20rpx
			color: #333;
		}

		.num {
			color: #282828;
			height: 92rpx;
		}
		
		.picker {
			height: 92rpx;
			display: flex;
			align-items: center;
			justify-content: space-between
		}
</style>
